<!-- 出价记录 -->

<template>
    <div class="auction_info">
        <div class="auction_title" style="position:relative">
            <h3 style="float:left">出价记录</h3>
            <div style="float:right ;font-size: 14px;">查看所有出价记录 ></div>
        </div>
        <div class=".record_list_box">
            <div class="tHeader">
                <table>
                    <thead>
                        <tr>
                            <th class="th th1">买家</th>
                            <th class="th ">所出价格</th>
                            <th class="th th3">出价时间</th>
                            <th class="th ">状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in result" :key="item.id">
                            <td>{{item.username}}</td>
                            <td v-text="item.bidprice"></td>
                            <td>{{(item.bidtime).split('.')[0].replace('T', ' ')}}</td>
                            <td v-if="index == 0">领先者</td>
                            <td v-if="index != 0">淘汰</td>
                        </tr>
                        <!-- <tr class="out">
                            <td>枇杷片</td>
                            <td>4620元</td>
                            <td>2022-09-25 20:40:40</td>
                            <td>淘汰</td>
                        </tr>
                        <tr class="out">
                            <td>枇杷片</td>
                            <td>4620元</td>
                            <td>2022-09-25 20:40:40</td>
                            <td>淘汰</td>
                        </tr> -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="auction_info">
        <div class="auction_title" style="position:relative">
            <h3 style="float:left">我要出价</h3>
            <div style="float:left; font-size: 14px;">根据本网所售商品的特殊性及古旧书行业的具体情况，网站不支持7天内无理由退货。
                <a href="">《孔网拍卖参拍须知》</a>
            </div>
        </div>

        <div class=".record_list_box">
            <div class="loginBid">
                <div class="bid_title">
                    <ul class="deatil_Bid">
                        <li>
                            当前价格
                            <i class="gray new_price" v-for="(item,index) in result" :key="item.id" v-show="index==0">￥{{item.bidprice}}</i>
                            <span class="fresh_btn">刷新价格</span>
                        </li>
                        <li>
                            起拍价
                            <i class="gray new_price">￥{{submitdata.startprice}}</i>
                        </li>
                        <li>
                            最小加价
                            <i class="gray new_price">￥{{submitdata.minimum}}</i>
                        </li>
                        <li style="clear: both;margin:0;padding:0;"></li>
                        <li>
                            可用保证金
                            <i class="gray new_price">￥0</i>
                        </li>
                        <li>
                            最高可出价
                            <i class="gray new_price">￥0</i>
                            <span class="red" style="margin-left: 8px;"><span><a href="缴纳保证金地址">缴纳保证金></a></span></span>
                        </li>
                        <li style="clear: both;margin:0;padding:0;"></li>
                    </ul>
                    <div style="float:left; font-size: 14px;">
                        <div class="bid_text" style="padding-left: 40px;color: #888888;font-size: 12px;"><img
                                style="width: 12px;margin-right: 4px;position: relative;top:-1px;"
                                src="https://static.kongfz.com/pm-web/static/img/tip@2x.ee5ac772.png"
                                alt="">当前拍品买家佣金5%，竞拍保证金10.5%，出价时将冻结15.5% </div>
                    </div>
                </div>
                <div class="Bid_table">
                    <div class="bidAll">
                        <div class="check">常规竞买</div>
                        <div class="check">代理竞买</div>
                        <div class="bid_help_link check">
                            (什么叫)
                            <a href="">常规竞买, 代理竞买</a>
                        </div>
                    </div>
                    <div class="auction_box">
                        <div class="auction_box_name">您的竞买价:</div>
                        <div class="auction_box_m">
                            <!-- 减价 -->
                            <div class="reduce gray" @click="Reduce">
                                <img class="black" src="https://static.kongfz.com/pm-web/static/img/reduce.d8815711.png"
                                    alt="">
                                <!-- <img class="gray"
                                            src="https://static.kongfz.com/pm-web/static/img/reduce_gray.4c16fa80.png"
                                            alt=""> -->
                            </div>
                            <div class="entry">
                                <input type="text" v-model="submitdata.currentPrice">
                                <!-- 选择框 -->
                                <ul class="selectCon" style="display: none;">
                                    <!-- selectCon_tmpl-->
                                    <li class="select_li">110</li>
                                    <li class="select_li">120</li>
                                    <li class="select_li">130</li>
                                    <li class="select_li">140</li>
                                    <li class="select_li">150</li>
                                    <li class="select_li">160</li>
                                    <li class="select_li">170</li>
                                    <li class="select_li">180</li>
                                    <li class="select_li">190</li>
                                </ul>
                            </div>
                            <!-- 加价 -->
                            <div class="increase"  @click="Add">
                                <img class="black"
                                    src="https://static.kongfz.com/pm-web/static/img/increase.2529398d.png" alt="">
                                <!-- <img class="gray"
                                            src="https://static.kongfz.com/pm-web/static/img/increase_gray.f850346b.png"
                                            alt=""> -->
                            </div>
                        </div>
                        <div class="putPrice red" @click="Submit">
                            <i class="button-text">竞价购买</i>
                        </div>
                        <div class="put_tip">只输入数字整数即可</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue';
import { bidrecord, getbidrecord } from '@/utils/api';
import { result } from 'lodash';

interface dataTypeI {
    id: number;
    bidprice: number;
    username: string;
    bidtime: string
}
export default defineComponent({
    name: 'bidName',
    props: {
        uid: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            submitdata: {
                currentPrice: 300,
                startprice: 200,
                bidstatus: 1,
                minimum: 10,
                bidtime: new Date(),
                userinfo: {
                    uid: 3,
                    username: '钩钩果子'
                }
            },

            result: [] as Array<dataTypeI>,
            fristInfo:[] as Array<dataTypeI>
        }
    },
    methods: {
        Submit() {
            console.log(this.submitdata)
            bidrecord(this.submitdata).then((res) => {
                console.log(res.data);
            });
            return this.submitdata;
        },

        //拿到数据并创建一个用户出价记录表
        getData() {
            getbidrecord(this.uid).then((res) => {
                if (res.status===200) {
                    this.result = res.data;
                    this.submitdata.currentPrice=res.data[0].bidprice
                }
            });
        },

        // 减价函数
        Reduce(){
            // if()
            this.submitdata.currentPrice-=10
        },

        Add(){
            this.submitdata.currentPrice+=10
        }

    },
    watch: {
        'submitdata.currentPrice'(nweVal) {
            // console.log(nweVal);
            this.submitdata.currentPrice=nweVal
        }
    },
    mounted() {
        this.getData()
    },
})

</script>
       
<style lang="scss" scoped>
.red {
    color: #8c222c;
    font-weight: 400;
    font-size: 12px;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}


.auction_info {
    width: 1200px;
    float: right;
    border: 1px solid #e9e9e9;
    margin: 20px auto 0;

    .auction_title {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        color: #404040;
        font-weight: 500;
        border-bottom: 1px solid #e9e9e9;

        h3 {
            padding-left: 40px;
            margin: 0px;
        }
    }
}

.fresh_btn {
    font-size: 12px;
    color: #993d43;
    margin-left: 8px;
    cursor: pointer;
}


.tHeader {
    width: 1119px;
    border: 1px solid #f3f3f3;
    margin: 20px auto;
}


table {
    width: 100%;

    .th {
        height: 40px;
        line-height: 40px;
        width: 25%;
        text-align: center;
    }

    .th1 {
        width: 20%;
    }

    .th3 {
        width: 30%;
    }

    tr td {
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
}

.bid_title {
    height: 90px;
    width: 100%;
    margin: 0px 40px;
}

.deatil_Bid li {
    font-size: 16px;
    color: #888;
    float: left;
    margin-bottom: 16px;
    margin-right: 70px;
}

.bidAll {
    display: flex;
    width: 1120px;
    background: #fafafa;
    border: 1px solid #eaeaea;
    margin: 58px auto 0;
    justify-content: center;

    .check {
        width: 302px;
        height: 44px;
        background: #e6f7ff;
        border: 1px solid #98b6df;
        border-bottom: 0;
        font-weight: 500;
        z-index: 2;
        left: 299px;
        text-align: center;
        line-height: 44px;
    }

    .bid_help_link {
        width: 46%;
    }
}


.auction_box {
    line-height: 50px;
    display: flex;
    padding-left: 159px;
    padding-top: 45px;
    padding-bottom: 45px;
    justify-content: flex-start;
    border: 1px solid #eaeaea;
    margin: 0px 41px;

    .reduce {
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        border: 1px solid #c7c7c7;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
    }


    .auction_box_m {
        display: flex;
        justify-content: center;
    }

    .entry {
        width: 252px;
        height: 50px;
        text-align: center;
        margin: 0 9px;

        input {
            width: 230px;
            height: 48px;
            text-align: center;
            font-size: 24px;
            color: #333;
            background: #fff;
            border: 1px solid #c7c7c7;
            border-radius: 4px;
            font-weight: 600;
            padding: 0 10px;
        }
    }

    .increase {
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 57px;
        border: 1px solid #c7c7c7;
        border-radius: 4px;
        cursor: pointer;
        background: #fff;
    }

    .putPrice {
        width: 130px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        font-size: 18px;
        color: #fff;
        background: #b8333c;
        border-radius: 4px;
        margin-top: 1px;
        margin-left: 30px;
        cursor: pointer;
    }

    .put_tip {
        height: 50px;
        line-height: 50px;
        margin-left: 16px;
        font-size: 14px;
        color: #888;
    }
}

.selectCon {
    display: none;
    // position: relative;
    z-index: 999;
    background-color: red;
}
</style>